<template>
    <view class="page m-pf">
		<view class="index-bg"><image src="../../static/images/ydt/index_cate_bg.png"></image></view>
        <!-- 轮播图 -->
		<view class="g-banner">
			<view class="lastet-news" v-if="isGoodType&&isShow">
				<swiper class="news-scroll" autoplay :interval="5000" circular vertical :duration="0" @change="change">
					<swiper-item class="item" v-for="(item, index) in newLotteryList" :key="index">
						<view class="user-pic"><image :src="item.head_pic_text"></image></view>
						<navigator open-type="navigate" url="/pages/user/lottery_more" class="news-text f-one-ellipsis">{{item.str}}</navigator>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="slider">
				<swiper class="banner-slide" autoplay :interval="3000" circular @animationfinish="toggleDot">
					<swiper-item v-for="(item, index) in carousel" :key="index" :data-id="item.id" @tap="openNav(item.url)">
						<navigator open-type="navigate" :url="item.url">
							<image :src="item.thumb" mode="widthFix"></image>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="g-banner-dots">
				<view v-for="(item, index) in carousel" :class="[nDot == index ? 'act' : '']" :key="index"></view>
			</view>
		</view>
		
        <view class="g-container">
			<!-- 通知栏 -->
			<view class="g-notice">
			    <image src="../../static/images/notice.png" mode="widthFix"></image>
			    <swiper class="g-notice-scroll" autoplay :interval="3000" circular vertical :duration="1000">
			        <swiper-item v-for="(item, index) in notice" :key="index">
			            <navigator open-type="navigate" :url="'/pages/common/activity_detail?id='+item.id">{{item.title}}</navigator>
			        </swiper-item>
			    </swiper>
			</view>
            <!-- 商城入口 -->
            <view class="g-mall" v-if="isGoodType">
                <view class="item" v-for="(item,index) in promotion" :key="index" v-if="index<4" @tap="openMall(item.id)">
                    <view class="icon">
						<image class="tu" :src="item.icon" mode="widthFix"></image>
					</view>
                    <text>{{item.name}}</text>
                </view>
            </view>
		</view> <!-- g-container -->
		<navigator class="classify-bg" open-type="reLaunch" url="/pages/jewel/user/diy">
			<image src="../../static/images/ydt/bg.png" class="bg-pic" mode="widthFix"></image>
		</navigator>
		<view class="other-cate" v-if="isGoodType">
			<view class="cate free" v-for="(item,index) in promotion" :key="index" v-if="index>3" @tap="openMall(item.id)">
				<view class="left">
					<view class="text">{{item.name}}</view>
					<view class="btn">{{item.name}}</view>
				</view>
				<image class="right" :src="item.icon"></image>
			</view>
		</view>
        <view class="g-product-list">
			<view class="list">
				<navigator open-type="navigate" class="g-product" v-for="(item,index) in productList" :key="index" :url="'/pages/transfer/transfer_view?id='+item.id" v-if="index%2==0">
				    <image class="prod-pic" :src="item.photos_text[0]" mode="widthFix"></image>
					<view class="title">{{item.content}}</view>
					<view class="info"><image class="head" :src="item.head_pic_text"></image><text class="name">{{item.member_name}}</text></view>
				</navigator>
			</view>
			<view class="list">
				<navigator open-type="navigate" class="g-product" v-for="(item,index) in productList" :key="index" :url="'/pages/transfer/transfer_view?id='+item.id" v-if="index%2==1">
				    <image class="prod-pic" :src="item.photos_text[0]" mode="widthFix"></image>
				    <view class="title">{{item.content}}</view>
				    <view class="info"><image class="head" :src="item.head_pic_text"></image><text class="name">{{item.member_name}}</text></view>
				</navigator>
			</view>
        </view>
		<view class="m-b-loading" v-if="bIsShowLoading">
		    <image src="../../static/images/loading2.gif" mode="widthFix"></image>
		    <text>加载中...</text>
		</view>
        <image class="u-to-top" v-if="bIsShowTop" src="../../static/images/to_top.png" mode="widthFix" @tap="toTop"></image>
		<navigator class="apply-btn" open-type="navigate" url="/pages/user/beStore"><image src="../../static/images/ydt/apply_store.png"></image></navigator>
        <!-- 搜索 -->
        <view class="popup-search" v-if="bIsShowPopup">
            <view class="g-header">
                <view class="m-head-search-box">
                    <view class="m-head-search">
                        <image class="m-head-search-icon" src="../../static/icons/search-icon.png" @tap="fSearch"></image>
                        <input type="text" v-model="search" placeholder='请输入关键字' @confirm="fSearch" :focus="bIsFocus" />
                    </view>
                    <button class="u-search-cancel" @tap="togglePopup">取消</button>
                </view>
            </view>
            <view class="g-search-history">
                <view class="m-search-history-box">
                    <view class="m-search-history-top">
                        <view class="u-search-titie">
                            搜索历史
                        </view>
                        <button @tap="delHistory">
                            <image class="u-search-delete" src="../../static/icons/search-delete.png"></image>
                        </button>
                    </view>
                    <view class="g-search-history-content">
                        <view class="u-history" v-for="(item,index) in history" :key="index" :data-key="item" @tap="historyTap">{{item}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view> <!-- page -->
</template>
<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                bIsScroll: false, // 是否超过滚动距离，头部显示
                nDot: 0, // 轮播图点
                bIsShowTop: false, // 显示回到顶部按钮 
                bIsShowMsg: true, // 显示消息红点
                bIsFocus: false,
                styles: {
                    notice: {
                        transform: 'translateY(0)'
                    }
                },
                bIsShowLoading: false,
                carousel: [], // 轮播图
                promotion: [], // 导航图标
                square: [], // 商品广告图
                rectangle: [], // 广告
                search: '', // 搜索值
                history: [], // 历史搜索
                width: 0,
                bIsShowPopup: false,
                nTitle: '',
                productList: [], // 商品列表
                page: 1, // 商品页数
                notice: [], // 通知滚动栏
				totalPages:1,//总页数
				isGoodType:false,
				isHasNewVersion:false,
				resResult:'',
				newLotteryList:[],
				isShow: false
            };
        },
		
        methods: {
			change(){
				this.isShow = !this.isShow
			},
			getIndex(complete){
				let that = this;
				henglang.get('app/getIndex',{},false,function(res){
					let data = res.data.data;
					that.carousel = data.ad.carousel;
					that.promotion = data.promotion;
					that.square = data.ad.square;
					that.rectangle = data.ad.rectangle;
					if(data.share){
						uni.setStorage({
							key:'app_share',
							data:data.share
						})
					}
					if(data.top_article.count > 0){
						that.notice = data.top_article.data;
					}
					if(data.article){
						uni.setStorage({
							key:'article',
							data:data.article
						});
					}
					if(typeof complete == 'function') complete(res);
					uni.setStorage({
						key: 'price_function',
						data: {
							can_widthdraw:data.can_widthdraw,
							can_change:data.can_change
						}
					});
					 //红点
					 //#ifdef APP-PLUS
					 let pages = getCurrentPages();
					 let page = pages[pages.length - 1];
					 let currentWebview = page.$getAppWebview();
					 if(data.messages > 0){
					 	currentWebview.showTitleNViewButtonRedDot({index:1});
					 }else{
					 	//隐藏红点
					 	currentWebview.hideTitleNViewButtonRedDot({index:1});
					 }           
					 //#endif
					
				});
			},
            getProduct(type) { // 请求商品
                let that = this;
				that.bIsShowLoading = true;
				if(that.page <= that.totalPages){
					henglang.get('app/getGoodsMore',{page: that.page,news:true},false,function(res){
						that.bIsShowLoading = false;
						if(res.data.code == '0'){
							if (res.data.data.length){
								// that.getGoodstype(1)
								that.getGoodstype(res.data.data[0].goods_type);
								
								if (type == 'plus') {
									that.productList = that.productList.concat(res.data.data);
								} else {
									that.productList = res.data.data;
									that.totalPages = res.data.total_pages;
								}
							}
						}
					});
				}
            },
			getGoodstype(e){
				let that = this
				if(e == 2){
					uni.setStorage({ // 保存商城切换模式
						key: 'isGoodType',
						data: true,
					});
					that.isGoodType = true
				}else{
					uni.setStorage({ // 保存商城切换模式
						key: 'isGoodType',
						data: false,
					});
					that.isGoodType = false
					
				}
			},
            toggleDot(e) {
                this.nDot = e.detail.current;
            },
            toTop() {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 100
                });
            },
            openNav(url='') {
				if(url){
					if(url.substr(0,4) == 'http'){
						uni.navigateTo({
							url:'/pages/common/webview'
						})
					}else{
						uni.navigateTo({
							url:url
						})
					}
				}
            },
			openMall(id) {
				this.promotion.forEach(function(item,index){
					if(item.id == id){
						switch(item.type){
							case 1:
							uni.navigateTo({
								url:item.url
							});
							break;
							case 2:
							henglang.launchApp(item,plus);
							break;
							case 3:
							break;
							case 4:
							break;
							case 5:
							uni.switchTab({
								url:item.app_url
							})
							break;
						}
						return false;
					}
				});
			},
			
            fSearch() {
                let origin = uni.getStorageSync('history') || [];

                if (!this.search) {
                    fShowToast('请输入关键字');
                    return false;
                }
                if (!origin.includes(this.search)) {
                    origin.push(this.search);
                    this.history = origin;
                }
                if (origin.length >= 15) {
                    origin.length = 15;
                }
                uni.setStorage({
                    key: 'history',
                    data: origin,
                });
                uni.navigateTo({
                    url: '/pages/ydt/search_list?goods_name=' + this.search
                });
            },
            togglePopup() {
                this.bIsShowPopup = !this.bIsShowPopup;
                this.bIsFocus = !this.bIsFocus;
                if (this.bIsShowPopup) {
                    this.nTitle.hide();
                } else {
                    this.nTitle.show();
                }
				uni.hideKeyboard();
            },
            delHistory() {
                this.history = [];
                uni.removeStorage({
                    key: 'history'
                });
            },
            historyTap(e) {
                let key = e.currentTarget.dataset.key;
                this.search = key;
                uni.navigateTo({
                    url: '/pages/ydt/search_list?goods_name=' + this.search
                });
            },
			getUrlParam(paraName) {
				var url = this.resResult;
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arrPara = arrObj[1].split("&");
					var arr;
					for (var i = 0; i < arrPara.length; i++) {
						arr = arrPara[i].split("=");
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
				}
				return "";
			}
        },
		onNavigationBarSearchInputClicked(e) {
			/* console.log('事件执行了')
			uni.navigateTo({
				url: '/pages/ydt/search_list'
			}); */
			this.togglePopup();
		},
        onReady() {
			let that = this;
			this.getIndex(function(res){
				//#ifdef APP-PLUS
				plus.navigator.closeSplashscreen();
				//#endif
			});
            that.getProduct();
			
            // 读取历史搜索记录
            let history = uni.getStorageSync('history');
            this.history = history;

            uni.getSystemInfo({
                success(res) {
                    that.width = res.screenWidth;
                }
            })
			//#ifdef APP-PLUS
			//首页搜索点击下拉
            let pages = getCurrentPages();
            let page = pages[pages.length - 1];
            let currentWebview = page.$getAppWebview();
            this.nTitle = currentWebview.getTitleNView();
			//#endif
			
        },
        onPageScroll({
            scrollTop
        }) {
            if (scrollTop >= 100) {
                this.bIsScroll = true;
                this.bIsShowTop = true;
                this.color = "#0f0";
            } else {
                this.bIsScroll = false;
                this.bIsShowTop = false;
                this.color = "#f00";

            }
        },
        onPullDownRefresh() {
            this.page = 1;
            this.getIndex();
            this.getProduct();
			uni.stopPullDownRefresh();
        },
        onReachBottom() {
            this.page = ++this.page;
			this.getProduct('plus');
        },
        onNavigationBarButtonTap({
            index
        }) {
			let that = this
            switch (index) {
                case 0:
                    uni.scanCode({
                        onlyFromCamera: true,
                        success: function(res) {
							that.resResult = res.result
							let action = that.getUrlParam('action')
							let pid = that.getUrlParam('pid')
							switch(action){
								case 'register_introduction':
									if(!henglang.checkLogin()){
										uni.navigateTo({
											url: '/pages/user/register?pid='+pid
										});
									}else{
										henglang.showToast('您已登录！请退出再操作',1000)
									}
								break;
							}
                        }
                    });
                    break;
                case 1:
                    uni.navigateTo({
                        url: '/pages/user/notice?type=1'
                    });
                    break;
                case 2:
                    this.togglePopup();
                    break;
            }
        },
		onLoad() {
			if(henglang.check_update) henglang.updataVersion();
			let that = this
			henglang.get('app/getNewLottery',{},false,function(res){
				that.newLotteryList = res.data.data
			});
		},
		onShow() {
			uni.showTabBar()
			henglang.upDateTabber()
			
		}
    }
</script>

<style>

    .page {
        background: #fafafa;
    }

    /* 页眉 */
    .g-header {
        transition: .3s;
        padding-top: var(--status-bar-height);
		background: #d71611;
    }

    .z-scroll {
        background: #fff;
    }

    .z-scroll .g-search {
        background: #f5f5f5;
    }

    .g-header .g-icon {
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, .5);
        border-radius: 100px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 10px;
        position: relative;
    }

    .u-msg-dot {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
        background: #d71311;
        border-radius: 100px;
    }

    .g-header .g-icon text {
        transform: scale(.8);
    }

    .g-header .g-icon image {
        width: 40%;
    }

    .g-search {
        border-radius: 5px;
        background: #fff;
        color: #ccc;
        text-align: center;
        height: 32px;
        line-height: 32px;
        position: relative;
        flex: 1;
        transition: .3s;
    }

    .g-search image {
        width: 20px;
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
    }

    /* 轮播图 */
    .g-banner {
		width: 700rpx;
        height: 345rpx;
        position: relative;
		z-index: 10;
		margin: 0 auto;
		padding-top: 140rpx;
    }

    .g-banner .slider,.banner-slide{
		width: 700rpx;
		height: 345rpx;
		border-radius: 10rpx;
		overflow: hidden;
    }
	
	.banner-slide image{
		width: 100%;
	}
    .g-banner-dots {
        position: absolute;
        bottom: 20upx;
        left: 50%;
        transform: translateX(-50%);
    }

    .g-banner-dots .act {
        background: #d71311;
    }

    .g-banner-dots view {
        width: 10upx;
        height: 10upx;
        border-radius: 100px;
        background: #ccc;
        margin-right: 10px;
        display: inline-block;
    }

    .g-banner-dots view:last-child {
        margin: 0;
    }
	
	.g-container{
		position: relative;
		z-index: 0;
		padding-top: 20upx;
		padding-bottom: 16rpx;
		
	}
	.g-container .bg{
		position: absolute;
		width: 100%;
		height: 575upx;
		left: 0;
		top: -86upx;
		z-index: -1;
	}
	.g-container .bg image{
		width: 100%;
		height: 100%;
		display: block;
	}
    /* 商城入口 */
    .g-mall {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: flex-start;
		margin-top: 40upx;
		padding: 0 2%;
		box-sizing: border-box;
    }
    .g-mall .item{
		width: 25%;
		text-align: center;
		margin-bottom: 30rpx;
    }
	.g-mall text {
		display: block;
		font-size: 26upx;
		color: #191919;
		margin-top: 10upx;
	}
	.g-mall .icon{
		width: 98rpx;
		height: 98rpx;
		margin: 0 auto;
		overflow: hidden;
	}
	.g-mall .icon image{
		width: 100%;
		height: 100%;
	}
    /* 通知栏 */
    .g-notice {
        display: flex;
        align-items: flex-start;
        height: 52upx;
		padding: 4upx 0;
        overflow: hidden;
		background: rgba(255,255,255,0.7);
		width: 715upx;
		margin: 0 auto;
		border-radius: 10upx;
    }

    .g-notice image {
        width: 134upx;
		margin: 4upx 10upx 0 15upx;
    }

    .g-notice-scroll {
        flex: 1;
        overflow: hidden;
        transition: .3s;
        line-height: 1.9;
        height: 40upx;
    }

    .g-notice navigator{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* 商品列表 */
    .g-product-list {
		position: relative;
		z-index: 2;
		margin-top: 30upx;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		background: #f3f3f3;
    }
	.g-product-list .list{
		width: 345rpx;
		margin: 0 7rpx;
	}
    .g-product {
        box-shadow: 0 0 4px rgba(245,245,245, 0.14);
        position: relative;
		background: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 10px;
		overflow: hidden;
    }
	.g-product .prod-pic{
		width: 345rpx;
		display: block;
	}
	.g-product .info{
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
		width: 318rpx;
		margin: 0 auto;
		border-top: 1px solid #ebebeb;
		margin-top: 15rpx;
	}
	.g-product .info .head{
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.g-product .info .name{
		flex: 1;
	}
	.g-product .title{
		width: 318rpx;
		margin: 0 auto;
		font-size: 30rpx;
		max-height: 84rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-height: 42rpx;
		margin-top: 15rpx;
	}
	
    .u-product-name{
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
		font-size: 26upx;
		line-height: 39upx;
		margin-top: 3upx;
    }
	.u-product-no{
		position: relative;
		z-index: 1;
		display: inline-block;
	}
	.u-product-no .no{
		font-size: 26upx;
		color: #ffffff;
		line-height: 38upx;
		background: #de2b29;
		display: inline-block;
		padding: 0 10upx;
	}
	.u-product-no .bg{
		position: absolute;
		top: 5upx;
		left: 5upx;
		background: #fac9c8;
		z-index: -1;
		width: 100%;
		height: 100%;
	}
	.u-product-cate {
		color: #828080;
		font-size: 26upx;
	}
    .g-progress-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
		margin-top: 10upx;
    }

    .g-progress-wrap>text {
        color: #d71311;
    }

    .g-progress {
        height: 36upx;
        background: #fdd0d0;
        border-radius: 100px;
        color: #fff;
        text-align: center;
        width: 280upx;
		position: relative;
    }
	.g-progress text{
		position: absolute;
		left: 20upx;
		color: #ffffff;
		top: -2upx;
		font-size: 28upx;
		
	}
    .g-progress-line {
        width: 50%;
        background: #d71311;
        border-radius: 100px;
        height: 100%;
        line-height: 36upx;
        white-space: nowrap;
    }

    .u-price {
        color: #d71311;
        margin-right: 20upx;
        font-size: 36upx;
    }
	
    .u-people {
        color: #828080;
    }
	.u-price text{
		font-size: 28upx;
	}
    .u-product-sign {
        position: absolute;
        top: 15upx;
        left: 15upx;
        width: 75upx;
		height: 75upx;
    }
	.g-product-price{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
    .g-go {
        background: #d71311;
        border-radius: 100px;
        box-shadow: 0 0 15px rgba(215, 19, 17, .2);
        font-size: 36upx;
        color: #fff;
        width: 100upx;
        padding: 4upx 0 4upx 16upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .u-to-top {
        position: fixed;
        right: 10px;
        bottom: 0px;
        width: 100upx;
        height: 100upx;
		z-index: 5;
    }

    /* 搜索 */
    .popup-search {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 100;
        background: #fff;
    }

    .m-head-search-box {
		display: flex;
		align-items: center;
		justify-content: center;
        width: 90%;
		margin: 0 auto;
		padding: 10upx 0;
    }

    .m-head-search {
		flex: 1;
		display: flex;
		align-items: center;
		overflow: hidden;
		background: #ffffff;
		border-radius: 100upx;
		padding: 10upx 0;
    }

    .m-head-search input {
        flex: 1;
		height: 36upx;
        color: #828080;
        font-size: 28upx;
		padding-right: 15upx;
    }

    .m-head-search-icon {
        height: 37upx;
        width: 35upx;
		margin: 0 20upx;
    }

    .u-search-cancel {
        color: #fff;
        font-size: 28upx;
		padding-left: 5%;
    }

    .g-search-history {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .m-search-history-box {
        border-bottom: 2upx solid #f1f1f1;
        width: 100%;
    }

    .m-search-history-top {
        height: 40upx;
        margin-top: 32upx;
        margin-bottom: 30upx;
    }

    .u-search-titie {
        font-size: 32upx;
        float: left;
    }

    .u-search-delete {
        float: right;
        width: 44upx;
        height: 44upx;
    }

    .g-search-history-content {
        overflow: hidden;
    }

    .u-history {
        height: 70upx;
        width: auto;
        text-align: center;
        border-radius: 25upx;
        background: #f5f5f5;
        color: #5b5b5b;
        line-height: 70upx;
        font-size: 28upx;
        margin-right: 29upx;
        margin-bottom: 30upx;
        float: left;
        padding: 0upx 30upx;
    }
	.classify-bg{
		position: relative;
		z-index: 1;
		margin-top: 24upx;
		display: flex;
		justify-content: center;
	}
	.classify-bg image{
		width: 633rpx;
		height: 134rpx;
	}
	.lastet-news{
		position: fixed;
		top: var(--status-bar-height);
		left: 26rpx;
		width: 548upx;
		height: 60upx;
		display: flex;
		align-items: center;
		background: rgba(0,0,0,0.7);
		border-radius: 10upx;
		margin-top: 104rpx;
		z-index: 999;
		overflow: hidden;
	}
	.lastet-news .user-pic{
		width: 60upx;
		height: 60upx;
		background: #000000;
		overflow: hidden;
		margin-right: 10upx;
	}
	.lastet-news .user-pic image{
		width: 60upx;
		height: 60upx;
	}
	
	.lastet-news .news-text{
		color: #FFFFFF;
		font-size: 26upx;
		width: 470upx;
	}
	.news-scroll{
		width: 100%;
		height: 60upx;
	}
	.news-scroll .item{
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
		line-height: 60upx;
		height: 60upx;
	}
	.apply-btn{
		position: fixed;
		bottom: 100rpx;
		right: 0;
		display: block;
		z-index: 99;
		width: 163rpx;
		height: 156rpx;
	}
	.apply-btn image{
		width: 100%;
		height: 100%;
	}
	.index-bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.index-bg image{
		width: 100%;
		height: 1136rpx;
	}
	.other-cate{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		position: relative;
		z-index: 2;
		padding-top: 16rpx;
		background: #c50d25;
		padding-bottom: 10rpx;
	}
	.other-cate .cate{
		width: 346rpx;
		height: 165rpx;
		overflow: hidden;
		border-radius: 10px;
		display: block;
		margin: 0 6rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.other-cate .cate .left{
		margin-left: 20rpx;
	}
	.other-cate .cate .right{
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}
	.other-cate .cate .text{
		font-size: 32rpx;
		color: #83646b;
		padding-bottom: 20rpx;
		padding-left: 15rpx;
	}
	.other-cate .cate .btn{
		font-size: 32rpx;
		color: #ffffff;
		width: 144rpx;
		height: 54rpx;
		background: #f7323c;
		text-align: center;
		line-height: 54rpx;
		border-radius: 50px;
	}
	.other-cate .free{
		background: linear-gradient(to right, #fff8f1, #fdeed9);;
	}
	.other-cate .ba{
		background: linear-gradient(to right, #f6f3ee, #e6bdcd);;
	}
</style>
